<template>
	<view class="height-100 bg-gray overflow-hidden">
		<view class="bg-white radius-xl margin">
			<button class="botton-none" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="flex-direction-row align-center justify-between padding">
					<text class="text-df margin-lr">头像</text>
					<view class="flex-direction-row align-center">
						<image :src="userinfo.avatar || '/static/images/user.png'" class="cu-avatar round"
							mode="aspectFit">
						</image>
						<text class="text-df iconfont color-gray margin-left-xs">&#xe61f;</text>
					</view>
				</view>
			</button>
			<view class="flex-direction-row align-center padding border-top"
				@click="$navigator('/pages/my/setNickname?nickname='+userinfo.doctorName)">
				<text class="text-df margin-lr flex-sub">昵称</text>
				<view class="">
					<text class="text-df color-black-b">{{userinfo.doctorName}}</text>
					<text class="text-df iconfont color-gray margin-left-xs">&#xe61f;</text>
				</view>
			</view>
		</view>
		<view class="margin">
			<text class="text-df color-black-b">账号绑定</text>
		</view>
		<view class="bg-white radius-xl margin">
			<view class="flex-direction-row align-center padding border-top">
				<text class="text-df margin-lr flex-sub">手机号</text>
				<view class="">
					<text class="text-df color-black-b">{{userinfo.mobile}}</text>
					<text class="text-df iconfont color-gray margin-left-xs">&#xe61f;</text>
				</view>
			</view>
			<view class="flex-direction-row align-center padding border-top" @click="bindWx">
				<text class="text-df margin-lr flex-sub">微信呢称</text>
				<view class="">
					<text class="text-df color-black-b">15121161146</text>
					<text class="text-df iconfont color-gray margin-left-xs">&#xe61f;</text>
				</view>
			</view>
		</view>
		<view class="bg-white radius-xl margin">
			<view class="flex-direction-row align-center padding border-top" @click="logoff">
				<text class="text-df margin-lr flex-sub">注销账号</text>
				<view class="">
					<text class="text-df color-orange">注销后无法恢复，请谨慎操作</text>
					<text class="text-df iconfont color-gray margin-left-xs">&#xe61f;</text>
				</view>
			</view>
		</view>
		<!-- 解绑微信popup -->
		<uni-popup ref="bindWxPopup" type="center">
			<view class="bg-white radius-xl overflow-hidden" style="width: 660rpx; z-index: 1000;">
				<view class="padding-tb-xsm bg-df text-center">
					<text class="text-lg color-white">确定要解绑第三方账号？</text>
				</view>
				<view class="padding-xl text-center">
					<text class="text-lg color-black">解绑后将无法继续使用它登录延天龄</text>
				</view>
				<view class="flex-direction-row justify-around padding-tb border-top">
					<view class="border-gray radius-sl text-center padding-tb-xs" style="width: 200rpx;"
						@click="closePopup">
						<text class="text-df color-black-q">取消</text>
					</view>
					<view class="border-df radius-sl text-center padding-tb-xs" style="width: 200rpx;"
						@click="bindWxYes">
						<text class="text-df color-df">确定</text>
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
		</uni-popup>
		<!-- 注销popup -->
		<uni-popup ref="logoffPopup" type="center">
			<view class="bg-white radius-xl overflow-hidden" style="width: 660rpx; z-index: 1000;">
				<view class="padding-tb-xsm bg-df text-center">
					<text class="text-lg color-white">确定要注销账号吗？</text>
				</view>
				<view class="padding-xl text-center">
					<text class="text-lg color-black">注销前请确保职位工作交接完成，一旦注销，账户数据将会清空</text>
				</view>
				<view class="flex-direction-row justify-around padding-tb border-top">
					<view class="border-gray radius-sl text-center padding-tb-xs" style="width: 200rpx;"
						@click="closePopup">
						<text class="text-df color-black-q">取消</text>
					</view>
					<view class="border-df radius-sl text-center padding-tb-xs" style="width: 200rpx;"
						@click="logoffYes">
						<text class="text-df color-df">确定</text>
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserinfo
	} from "@/common/user.js"
	import {
		bestHost
	} from '@/common/request.js'
	export default {
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			uni.$on('updateUser', data => {
				this.userinfo = uni.getStorageSync('userinfo');
			});
			console.log('bestHost: ', bestHost);
		},
		data() {
			return {
				userinfo: {}
			}
		},
		onUnload() {
			uni.$off('updateUser');
		},
		methods: {
			async onChooseAvatar(e) {
				// 修改头像
				console.log('onChooseAvatar e: ', e);
				// 1 文件上传模式
				uni.uploadFile({
					url: bestHost + '/commonApi/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						'type': 'test'
					},
					success: (uploadFileRes) => {
						console.log('uploadFile:', uploadFileRes);
						let data = JSON.parse(uploadFileRes.data);
						// this.uploadImages.push(data.fileName);
						// console.log('this.uploadImages: ', this.uploadImages);
						this.updateAvatar(data.fileName);
					},
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '图片上传失败',
							showCancel: false
						});
						console.log('onChooseAvatar err: ', err);
					}
				});
				console.log('this.uploadImages: ', this.uploadImages);
			},
			async updateAvatar(avatar) {
				// let res = await uni.$request.post('/memberApi/updateAvatar', {
				// 	avatar: base64
				// });
				let res = await uni.$request.post('/doctorApi/updateUser', {
					avatar: avatar
				});
				console.log('updateAvatar res: ', res);
				if (res.code == 200) {
					uni.showToast({
						title: '头像修改成功',
						icon: "none"
					})
					// 重新请求一下用户数据
					setTimeout(async () => {
						let res = await getUserinfo();
						// 缓存用户数据
						uni.setStorageSync('userinfo', res.data);
						// 通知其它页面
						uni.$emit('updateUser');
					}, 800);
				} else {
					uni.showModal({
						title: '提示',
						content: '头像修改失败',
						showCancel: false
					});
				}
			},
			bindWx() {
				this.$refs.bindWxPopup.open();
			},
			logoff() {
				this.$refs.logoffPopup.open();
			},
			closePopup() {
				this.$refs.bindWxPopup.close();
				this.$refs.logoffPopup.close();
			},
			// 确认解绑
			bindWxYes() {
				uni.showToast({
					title: '解绑成功',
					icon: 'none'
				})
				setTimeout(() => {
					this.$refs.bindWxPopup.close();
				}, 600);
			},
			// 确认注销
			logoffYes() {
				uni.showToast({
					title: '（测试）注销成功',
					icon: 'none'
				})
				setTimeout(() => {
					this.$refs.logoffPopup.close();
				}, 600);
			}
		}
	}
</script>

<style>

</style>